<template>
  <div class="app-container">
    <SearchForm
      ref="searchForm"
      :queryParams.sync="queryParams"
      :searchFrame="searchFrame"
      :isDerive="false"
      @search="handleQuery"
    />

    <Table :tableData="tableData" ref="table">
      <template #operate="{ data }">
        <el-button @click="handleAudit(data)" type="text">审核</el-button>
        <el-button @click="handleEdit(data)" type="text">编辑</el-button>
        <el-button @click="handleDel(data)" type="text">删除</el-button>
      </template>
      <template #cardPhoto="{ data }">
        <div v-if="data.cardPhoto" class="photo">
          <img v-for="(item, index) in data.cardPhoto" :key="index" :src="item" alt="">
        </div>
      </template>
      <template #certificatePhoto="{ data }">
        <div v-if="data.certificatePhoto" class="photo">
          <img :src="data.certificatePhoto" alt="">
        </div>
      </template>
    </Table>

    <pagination
      v-show="tableData.total > 0"
      :total="tableData.total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getListByPage"
    />

    <Dialog ref="Dialog" @refresh="handleQuery"></Dialog>
  </div>
</template>

<script>
import { configTableFrame, searchFrame } from './frameData'
import Dialog from "./dialog.vue";
import BindDialog from '@/components/bindDialog/index.vue'
import { frequencyType, taskType } from "./types";
import { getDoctorList, delDoctors } from '@/api/doctor';
import { modifyAuth } from '../../../api/doctor';

export default {
  name: "doctor",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 列表数据
      tableData: {
        loading: false,
        columns: configTableFrame,
        total: 0,
        data: [],
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      frequencyType,
      taskType,
      searchFrame
    };
  },
  components: {
    Dialog,
    BindDialog,
  },
  created() {
    this.getListByPage();
  },
  methods: {
    getListByPage(params) {
      this.loading = false;
      getDoctorList({
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        ...this.queryParams,
        ...params
      }).then(res => {
        if(res.rows && res.rows.length >= 0){
          const rows = res.rows.map((item, index) => {
            item.num = (this.queryParams.pageNum - 1) * 10 + index + 1
            return item
          })
          this.tableData.data = rows;
        }
        this.tableData.total = res.total;
        this.loading = false;

      }).catch(() => {
        this.loading = false;
      })
    },
    handleQuery(params) {
      this.queryParams.pageNum = 1;
      this.getListByPage(params);
    },
    handleAdd(){
      this.$refs.Dialog.showDialog();
    },
    handleEdit(data){
      this.$refs.Dialog.showDialog(data);
    },
    handleAudit(data){
      this.$confirm(`确认审核通过？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      .then(() => {
        modifyAuth(JSON.stringify([data.id])).then(() => {
          this.$message({
            type: "success",
            message: "审核成功!",
          });
          this.getListByPage();
        })
      });
    },
    handleDel(data){
      this.$confirm(`确认删除？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      .then(() => {
        delDoctors(data.id).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getListByPage();
        })
      });
    }

  }
};
</script>
<style scoped lang="scss">
.photo{
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;

  img{
    width: 50px;
    height: 50px;
    margin: 0 5px;
  }
}
</style>